<template>
	<view class="page100">
		<view class="fz_18 fb pt_12 pl_16">
			验证手机号
		</view>
		<view class="fz_12 fc_999 mt_8 pl_16">
			验证码已经发送到您的手机 +86 {{phone}}
		</view>
		<!-- <view class="jiaoyiTip">{{tips}}</view> -->
		<view class="pwd-box clearfix">
			<view class="pwd-text fx aic jcc" v-for="(item,index) in 4" :key="index" :data-index="index"
				:class="{active:(activeInput == index)}">{{paymentPwd[index]}}</view>
		</view>
		<view class="fx jcb fz_12 plr_16">
			<text>4位数字验证码</text>
			<text class="fc_primary" @tap="getCode">{{verifyTips}}</text>
		</view>
		<!-- <view class="jiaoyiForgetBox">
			<navigator hover-class='none' :url="`/pages/user/safeVerify?type=6&phone=${phone}`"
				class='jiaoyiForget colorGreen' v-if="captcha === ''">
				忘记交易密码？</navigator>
		</view> -->

		<view class="keyboard-modal layout_h">
			<view class="keyboard keyboard-show">
				<view class="key-box clearfix">
					<view class="num" v-for="item in digitalList" :key="item"
						:class="{'no-num':(item === '' || item === '-1')}" @click="getKeyNumber(item)">{{item}}</view>
				</view>
			</view>
		</view>

		<view class="next_btn layout_v_c bac-def" v-if="firstPwd != ''" @click="nextBtnClik">完成</view>
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" ref="uCode" @change="codeChange" unique-key="check-phone"
			:keepRunning="true"></u-code>
	</view>

</template>

<script>
	import verifyCode from '@/mixins/verify_code.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [verifyCode],
		data() {
			return {
				uid: "",
				payFocus: true,
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'], //键盘
				paymentPwd: '',
				activeInput: 0,
				firstPwd: '', // 第一次密码
				phone: '', // 手机号
				captcha: '', // 验证码
				tips: '请输入旧的支付密码，已验证身份',
				oldTradePwd: '', //旧支付密码
				withdrawal: false, //提现设置支付密码
				backCount: 1, //后退页面数量
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				type: '',
				reset: false
			};
		},
		onLoad(e) {
			if (e.type) this.type = e.type || ''
			// if (e.phone) that.phone = e.phone
			if (e.reset) this.reset = true
			if (e.withdrawal) this.withdrawal = true
			// if (e.captcha) {
			// 	that.captcha = e.captcha
			// 	that.tips = (that.withdrawal ? "请设置密码，建议勿与银行卡取款密码相同" : "请重设密码，建议勿与银行卡取款密码相同")
			// }
			// if (e.count) {
			// 	that.backCount = e.count * 1
			// }
			this.phone = this.userInfo.phone || ''
			if (this.phone) {
				this.getCode()
			} else {
				return this.$utils.showToast('未获取手机号码', 1500, 1)
			}
			this.setNavTitle()
			// uni.setNavigationBarTitle({
			// 	title: (that.withdrawal ? "设置交易密码" : "交易密码")
			// })
		},
		onShow() {
			this.userInfo = this.$storage.getItem('basicUnserInfo') || {}
			this.phone = this.userInfo.phone || ''
		},
		computed: {
			payPassWord() {
				var payPassWord = this.paymentPwd.split('') || [];
				payPassWord.fill('*');
				return payPassWord;
			}
		},
		methods: {
			setNavTitle() {
				let title = ''
				switch (this.type) {
					case 'login':
						title = '修改登录密码'
						break;
					default:
						break
				}
				uni.setNavigationBarTitle({
					title
				})
			},
			getVerify() {
				setTimeout(() => {
					this.showSend()
				}, 2000)
			},
			// 输入中
			getKeyNumber(val) {
				let paymentPwdArr = this.paymentPwd.split('');
				if (val === '' || (val != -1 && paymentPwdArr.length === 4)) {
					if (paymentPwdArr.length === 4) {
						this.submit();
						return;
					}
					return false;
				} else if (val != -1) { //数字输入
					paymentPwdArr.splice(this.activeInput, 0, val);
					this.activeInput++;
					this.paymentPwd = paymentPwdArr.join('');
					if (paymentPwdArr.length === 4) {
						this.submit();
						return;
					}
				} else { //删除
					if (this.activeInput >= 0) {
						this.activeInput !== 0 && this.activeInput--;
						paymentPwdArr.splice(this.activeInput, 1);
						this.paymentPwd = paymentPwdArr.join('');
					}
				}
			},

			// 输入完成
			submit(clickFlag) {
				this.$utils.loading()
				api.post('/user/api/customerSet/validatedCode', {
					mobileCode: this.paymentPwd,
					phone: this.phone
				}).then(res => {
					if (res.data) {
						if (this.withdrawal) {
							uni.redirectTo({
								url: '/pages/person/pages/pay_password?withdrawal=true&reset=true&type='+this.type
							})
						} else if (this.reset) {
							uni.redirectTo({
								url: '/pages/person/pages/pay_password?reset=true&type='+this.type
							})
						} else {
							uni.redirectTo({
								url: '/pages/person/pages/login_password?type=2'
							})
						}
					} else {
						this.$utils.showToast('验证码错误')
					}
				})
			},
			getVerify() {
				api.get("/user/api/auth/sendLoginSms/" + this.phone).then((res) => {
					this.showSend();
				});
			},
		}
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss">
	.jiaoyiTip {
		padding: 40rpx 36rpx 0;
		box-sizing: border-box;
		display: block;
	}


	.pwd-box {
		padding: 48rpx 24rpx;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.pwd-text {
		position: relative;
		line-height: 100rpx;
		vertical-align: middle;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		background: #F4F4F4;
		margin: 0 8rpx;
	}

	.jiaoyiForgetBox {
		padding: 0 36rpx;
		box-sizing: border-box;
		display: flex;
		display: -webkit-flex;
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
		-moz-justify-content: flex-end;
		-o-justify-content: flex-end;
	}

	.jiaoyiForget {
		display: inline-block;
	}

	.jiaoyimm_at::before {
		content: "";
		width: 20rpx;
		height: 20rpx;
		border-radius: 100%;
		background: #333333;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 1;
	}

	.input_control {
		position: relative;
		left: -300rpx;
		bottom: 0;
		width: 100rpx;
		height: 100rpx;
	}

	.keyboard-modal {
		position: fixed;
		z-index: 2;
		transition: inherit;
		width: calc(100% + 3px);
		height: 420rpx;
		bottom: 0;
		left: 0;
		transform: translate(0, 0);
		background-color: #fff;
		padding-padding: 0;
		padding-padding: constant(safe-area-inset-top);
		padding-padding: env(safe-area-inset-top);

		.keyboard {
			box-shadow: 0 -1rpx 0 3rpx #eee;
			width: 100%;
			transition: all .2s linear;
			transform: translateY(100%);
		}

		/* 键盘 */
		.key-box {
			box-shadow: 0 0 0 2rpx #eee;
			position: relative;
			overflow: hidden;
			width: 100%;
			margin-top: 20rpx;
		}

		.keyboard-show {
			transform: translateY(0);
		}

		.num {
			transition: all .2s linear;
			float: left;
			background-color: #fff;
			box-shadow: 0 0 0 2rpx #eee;
			width: 33.33333333%;
			cursor: pointer;
			height: 100rpx;
			text-align: center;
			color: #333;
			line-height: 100rpx;
			font-size: 50rpx;
			font-weight: 500;
			position: relative;
			overflow: hidden;

			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				//设置径向渐变
				background-image: radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 20%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5);
				opacity: 0;
				transition: transform .2s ease-in-out, opacity .3s ease-in-out;
			}

			&:active:after {
				//transform: scale(0);
				opacity: .2;
				//设置初始状态
				transition: 0s;
			}
		}

		.num:nth-of-type(3n+1) {
			border-bottom: 0;
			border-left: 0;
		}

		.num:nth-of-type(3n+2) {
			border-bottom: 0;
			border-left: 0;
			border-right: 0;
		}

		.num.no-num {
			background-color: #f2f2f2;
			font-size: 0;
		}

		.num:last-child {
			background: #f2f2f2 url() center center / auto 50rpx no-repeat;
		}
	}

	.next_btn {
		margin: 150rpx 24rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 44rpx;
	}
</style>